import React, {Component} from 'react'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    FlatList,
} from 'react-native'

import liebiao from '../images/leibiao.png'
import shezhi from '../images/shezhi.png'
import tixing from '../images/naoling.png'

var imagesArr = [liebiao, shezhi, tixing]
import BasePage from '../BasePage'
import NavigationBar from 'teaset/components/NavigationBar/NavigationBar';
import BoundPage from '../BoundPage';
import GateWayPage from './GateWay';
import Toast from 'teaset/components/Toast/Toast';
import CommonStyle from '../CommonStyle'
import PageView from "../Component/Common/PageView";

export default class GateWayCenterPage extends BasePage {

    constructor(props) {
        super(props);
        this.state = {
            ...this.state,

            isshow: false

        };

    }

    componentWillMount() {


        this.showLoad(true)
        setTimeout(this.openApp.bind(this), 2000);
    }

    openApp() {
        this.showLoad(false)

        this.setState({
            isshow: true
        })
    }


    renderNavigationBar() {
        return (
            <NavigationBar
                style={{backgroundColor: 'white',}}

                title={
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'center',
                        alignSelf: 'center',

                    }}>
                        <Text style={{
                            fontSize: 20,
                            color: '#333333'
                        }}>(SN)网关设置</Text>
                    </View>}

                leftView={<TouchableOpacity
                    onPress={() => {


                        this.navigator.pop();


                        // DeviceEventEmitter.emit('my', {text: '刷新'})

                    }}
                >
                    <Image style={{width: 15, height: 15, marginLeft: 20}} source={require('../images/btn_back.png')}/>

                </TouchableOpacity>}
                // rightView={<TouchableOpacity
                //     onPress={() => {
                //
                //     }}
                // >
                //     <Image style={{width: 22, height: 22, marginRight: 20}} source={require('./images/add.png')}/>
                //
                // </TouchableOpacity>}
            />

        );
    }


    renderPage() {
        return (


            <PageView style={{
                flex: 1
            }} hiddenNav={true} fromPage={this} {...this.state}>{
                this.state.isshow ?

                    <View style={{
                        flex: 1,
                        backgroundColor: '#f2f2f2',
                        marginTop: CommonStyle.statusBarAndNavigationBarH + 10
                    }}>
                        <FlatList
                            data={[{
                                type: '网关列表',
                                key: 1
                            }, {
                                type: '网关设置',
                                key: 2
                            }, {
                                type: '提醒设置',
                                key: 3
                            }]}
                            renderItem={this._renderItem}
                            ListHeaderComponent={this._ListHeaderComponent}
                            keyExtractor={this._keyExtractor}
                        />
                    </View>
                    : null
            }

            </PageView>
        );
    }

    _renderItem = ({item, index}) => {
        return (
            <TouchableOpacity style={{height: 50, marginTop: 10, backgroundColor: 'white', flexDirection: 'row'}}
                              onPress={() => {
                                  if (index == 0) {
                                      this.navigator.push({view: <BoundPage/>})
                                  } else if (index == 1) {
                                      this.navigator.push({view: <GateWayPage/>})
                                  } else {
                                      Toast.message('绑定网关后才能设置闹铃')
                                  }
                              }}
            >
                <Image source={imagesArr[index]} style={{marginTop: 10, marginLeft: 15, width: 28, height: 28}}/>
                <Text style={{marginTop: 15, marginLeft: 10,}}>{item.type}</Text>
                <Image style={{position: 'absolute', right: 20, marginTop: 10, width: 15, height: 15}}
                       source={require('../images/go.png')}/>
            </TouchableOpacity>
        );

    }
    _ListHeaderComponent = () => {
        return (

            <View style={{height: 80, flexDirection: 'row'}}>
                {}
                <Image style={{marginLeft: 5, marginTop: 10, width: 60, height: 60}}
                       source={require('../images/xuxian.png')}/>
                <Text style={{marginLeft: 20, marginTop: 30, fontSize: 24}}>未登录网关</Text>
            </View>
        );
    }
    _keyExtractor = ({item, index}) => {
        return index;
    }

}